<template>
    <div class="filter">
        <div
            class="uploadBtn"
            v-if="localTypeUnit == 1"
        >
            <el-select
                v-model="typeUnit"
                class="m-2"
                placeholder="请选择上传单位"
                style="width: 160px"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>

        <div class="uploadBtn">
            <el-date-picker
                v-model="dateStartTime"
                type="date"
                :disabled-date="disabledDate1"
                style="width: 160px"
            />
        </div>
        <div
            class="uploadBtn"
            style="line-height: 38rem"
        >至</div>
        <div class="uploadBtn">
            <el-date-picker
                v-model="dateEndTime"
                type="date"
                :disabled-date="disabledDate2"
                style="width: 160px"
            />
        </div>
        <!-- <div class="uploadBtn">
            <el-date-picker v-model="timeDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间"  />
        </div> -->
        <div class="uploadBtn">
            <el-button
                type="primary"
                @click="search"
            >查询</el-button>
        </div>
        <div class="uploadBtn">
            <el-button
                type=""
                @click="exportDataList"
            >导出</el-button>
        </div>
        <div class="uploadBtn">
            <el-button
                type=""
                @click="uploadFile"
            >文件上传</el-button>
        </div>
        <div class="uploadBtn">
            <el-button
                type=""
                @click="filling"
            >手工填报</el-button>
        </div>
    </div>
    <el-table
        :data="getValues"
        :show-header="false"
        border
        :span-method="objectSpanMethod"
        ref="tableList"
        size="small"
    >
        <el-table-column
            prop="title"
            label=""
            :width="60"
            fixed=""
            align="center"
        >
            <template #default="scope">
                <span>{{ identifyResultList[scope.$index].title }}</span>
            </template>
        </el-table-column>
        <el-table-column
            v-for="(item, index) in getHeaders"
            :key="index"
            :prop="item"
            :fixed="index == 0"
            :width="index < 1 ? 80 : index > resultList.length - 7 ? 74 : 56"
            align="center"
        >
            <template #default="scope">
                <span>{{ scope.row[item] || "-" }}</span>
                <!-- <el-input v-else-if="index > 0 && index < resultList.length - 6" v-model="scope.row[item]" size="small"
                    @blur="blurFn(index, scope.$index, scope.row[item])" @focus="focusFn(index, scope.$index)"
                    :disabled="isNoEdit()" /> -->
                <!-- {{ index }}{{ scope.$index }} {{ scope.row[item] }} -->
            </template>
        </el-table-column>
    </el-table>
    <div class="chart">
        <div
            class="settingSta"
            v-if="chartTypeModel !== 'treatedWaterQuantity'"
        >
            <span style="margin-right: 10px">标准线</span>
            <el-input
                v-model="input"
                :type="'number'"
                style="width: 60px; margin-right: 10px"
            />
            <span style="margin-right: 10px">~</span>
            <el-input
                v-model="input2"
                :type="'number'"
                style="width: 60px; margin-right: 10px"
            />
            <!-- <el-button  type="primary" @click="setting">设置</el-button> -->
        </div>
        <el-select
            v-model="chartTypeModel"
            class="m-2"
            placeholder="请选择上传单位"
            style="width: 160px"
            @change="chartTypeModelChange"
        >
            <el-option
                v-for="item in chartTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <chart-line-bar
            :chartData="chartList"
            xAxisName="date"
            :title="`工艺数据图`"
            :option="option"
            :chartType="chartTypeItem"
            :twoYAxis="false"
            :markValue="input"
            :markValue2="input2"
            :unit="unit"
            ref="assayChart"
            :orient="'horizontal'"
            style="width: 100%"
        ></chart-line-bar>
    </div>

    <el-dialog
        v-model="uploadVisible"
        :title="dialogTitle"
        width="60%"
    >
        <el-scrollbar class="containRouter">
            <UploadFile
                :type="uploadType"
                viewType="2"
                @submitEditEmit="initTable"
            ></UploadFile>
        </el-scrollbar>
    </el-dialog>
    <el-dialog
        v-model="fillingVisible"
        title="手工填报"
        width="80%"
    >
        <el-scrollbar class="containRouter">
            <AssayFill @submitEditEmit="initTable"></AssayFill>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup>
import dataListHttp from "@/https/dataList.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { computed, onMounted, ref, watch } from "vue";
import ChartLineBar from "../charts/ChartLineBar.vue";
import standardLine from "./standardLine.js";
import UploadFile from "./upload.vue";
import AssayFill from "./xingshaProcessDataFill.vue";
const dateStartTime = ref(moment().startOf("month").format("YYYY-MM-DD"));
const dateEndTime = ref(moment().format("YYYY-MM-DD"));
const disabledDate1 = ref((time) => {
    return time.getTime() > Date.now();
});
const disabledDate2 = ref((time) => {
    return (
        time.getTime() < moment(dateStartTime.value) ||
        time.getTime() > Date.now()
    );
});
// const timeDate = ref([moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
const currentYear = ref(moment().format("YYYY"));
const localTypeUnit = ref(Storage.localGet("depId"));
const typeUnit = ref("2");
const username = ref(Storage.localGet("username"));
const uploadVisible = ref(false);
const fillingVisible = ref(false);
const uploadType = ref("1");
const dialogTitle = ref("");
const input = ref(1);
const input2 = ref(4);
const assayChart = ref(null);
const chartListCompale = ref([]);
const options = ref([
    // { label: '全部', value: '1' },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const hHeight = ref(0);
const wWidth = ref(0);
const tableItemWidth = ref(0);
const option = ref({});
const chartTypeModel = ref("do");
const chartTypeList = ref([
    { label: "DO(mg/L)", value: "do", idx: 0 },
    { label: "MLSS(mg/L)", value: "mlss", idx: 1 },
    { label: "SV30(%)", value: "sv30", idx: 2 },
    { label: "SVI(mL/g)", value: "svi", idx: 3 },
    { label: "MLVSS(mg/L)", value: "mlvss", idx: 4 },
    { label: "污泥含水率(%)", value: "containWater", idx: 5 },
]);
watch(chartTypeModel, () => {
    let compType =
        typeUnit.value == "2"
            ? "xingsha"
            : typeUnit.value == "3"
                ? "west"
                : typeUnit.value == "4"
                    ? "north"
                    : typeUnit.value == "5"
                        ? "south"
                        : "";
    input.value = standardLine[compType][chartTypeModel.value][0];
    input2.value = standardLine[compType][chartTypeModel.value][1];
});
const emits = defineEmits(["typeUnitChange"]);
watch(typeUnit, (val) => {
    emits("typeUnitChange", val);
});

const chartTypeItem = ref([]);
const chartTypeDo = ref([
    {
        type: "line",
        code: "do1",
        name: "氧化沟东",
        linerColor: ["#b5bfd8", "#b5bfd8"],
    },
    {
        type: "line",
        code: "do2",
        name: "氧化沟西",
        linerColor: ["#3ea7ea", "#3ea7ea"],
    },
    {
        type: "line",
        code: "do3",
        name: "cass",
        linerColor: ["#bdf5e8", "#bdf5e8"],
    },
    {
        type: "line",
        code: "do4",
        name: "A2/O东",
        linerColor: ["#9cf7b4", "#9cf7b4"],
    },
    {
        type: "line",
        code: "do5",
        name: "A2/O西",
        linerColor: ["#76da91", "#76da91"],
    },
    {
        type: "line",
        code: "do6",
        name: "四期南沟",
        linerColor: ["#63b2ee", "#63b2ee"],
    },
    {
        type: "line",
        code: "do7",
        name: "四期北沟",
        linerColor: ["#f89588", "#f89588"],
    },
]);
const chartTypeSv30 = ref([
    {
        type: "line",
        code: "sv1",
        name: "氧化沟东",
        linerColor: ["#b5bfd8", "#b5bfd8"],
    },
    {
        type: "line",
        code: "sv2",
        name: "氧化沟西",
        linerColor: ["#3ea7ea", "#3ea7ea"],
    },
    {
        type: "line",
        code: "sv3",
        name: "cass",
        linerColor: ["#bdf5e8", "#bdf5e8"],
    },
    {
        type: "line",
        code: "sv4",
        name: "A2/O东",
        linerColor: ["#9cf7b4", "#9cf7b4"],
    },
    {
        type: "line",
        code: "sv5",
        name: "A2/O西",
        linerColor: ["#76da91", "#76da91"],
    },
    {
        type: "line",
        code: "sv6",
        name: "四期南沟",
        linerColor: ["#63b2ee", "#63b2ee"],
    },
    {
        type: "line",
        code: "sv7",
        name: "四期北沟",
        linerColor: ["#f89588", "#f89588"],
    },
]);
const chartTypeMlss = ref([
    {
        type: "line",
        code: "mlss1",
        name: "氧化沟东",
        linerColor: ["#b5bfd8", "#b5bfd8"],
    },
    {
        type: "line",
        code: "mlss2",
        name: "氧化沟西",
        linerColor: ["#3ea7ea", "#3ea7ea"],
    },
    {
        type: "line",
        code: "mlss3",
        name: "cass",
        linerColor: ["#bdf5e8", "#bdf5e8"],
    },
    {
        type: "line",
        code: "mlss4",
        name: "A2/O东",
        linerColor: ["#9cf7b4", "#9cf7b4"],
    },
    {
        type: "line",
        code: "mlss5",
        name: "A2/O西",
        linerColor: ["#76da91", "#76da91"],
    },
    {
        type: "line",
        code: "mlss6",
        name: "四期南沟",
        linerColor: ["#63b2ee", "#63b2ee"],
    },
    {
        type: "line",
        code: "mlss7",
        name: "四期北沟",
        linerColor: ["#f89588", "#f89588"],
    },
]);
const chartTypeSvi = ref([
    {
        type: "line",
        code: "svi1",
        name: "氧化沟东",
        linerColor: ["#b5bfd8", "#b5bfd8"],
    },
    {
        type: "line",
        code: "svi2",
        name: "氧化沟西",
        linerColor: ["#3ea7ea", "#3ea7ea"],
    },
    {
        type: "line",
        code: "svi3",
        name: "cass",
        linerColor: ["#bdf5e8", "#bdf5e8"],
    },
    {
        type: "line",
        code: "svi4",
        name: "A2/O东",
        linerColor: ["#9cf7b4", "#9cf7b4"],
    },
    {
        type: "line",
        code: "svi5",
        name: "A2/O西",
        linerColor: ["#76da91", "#76da91"],
    },
    {
        type: "line",
        code: "svi6",
        name: "四期南沟",
        linerColor: ["#63b2ee", "#63b2ee"],
    },
    {
        type: "line",
        code: "svi7",
        name: "四期北沟",
        linerColor: ["#f89588", "#f89588"],
    },
]);
const chartTypeMlvss = ref([
    {
        type: "line",
        code: "mlvss1",
        name: "氧化沟东",
        linerColor: ["#b5bfd8", "#b5bfd8"],
    },
    {
        type: "line",
        code: "mlvss2",
        name: "氧化沟西",
        linerColor: ["#3ea7ea", "#3ea7ea"],
    },
    {
        type: "line",
        code: "mlvss3",
        name: "cass",
        linerColor: ["#bdf5e8", "#bdf5e8"],
    },
    {
        type: "line",
        code: "mlvss4",
        name: "A2/O东",
        linerColor: ["#9cf7b4", "#9cf7b4"],
    },
    {
        type: "line",
        code: "mlvss5",
        name: "A2/O西",
        linerColor: ["#76da91", "#76da91"],
    },
    {
        type: "line",
        code: "mlvss6",
        name: "四期南沟",
        linerColor: ["#63b2ee", "#63b2ee"],
    },
    {
        type: "line",
        code: "mlvss7",
        name: "四期北沟",
        linerColor: ["#f89588", "#f89588"],
    },
]);
const chartTypeContainWater = ref([
    {
        type: "line",
        code: "containWater1",
        name: "北厂区污泥脱水间",
        linerColor: ["#b5bfd8", "#b5bfd8"],
    },
    {
        type: "line",
        code: "containWater2",
        name: "南厂区污泥脱水间",
        linerColor: ["#3ea7ea", "#3ea7ea"],
    },
    {
        type: "line",
        code: "containWater3",
        name: "四期脱水间",
        linerColor: ["#bdf5e8", "#bdf5e8"],
    },
]);
chartTypeItem.value = chartTypeDo.value;
const chartTypeModelChange = (item, label) => {
    console.log(item, label);
    if (item == "do") {
        chartTypeItem.value = chartTypeDo.value;
    } else if (item == "mlss") {
        chartTypeItem.value = chartTypeMlss.value;
    } else if (item == "sv30") {
        chartTypeItem.value = chartTypeSv30.value;
    } else if (item == "svi") {
        chartTypeItem.value = chartTypeSvi.value;
    } else if (item == "mlvss") {
        chartTypeItem.value = chartTypeMlvss.value;
    } else if (item == "containWater") {
        chartTypeItem.value = chartTypeContainWater.value;
    }
};
const unit = ref(["单位:mg/L"]);
const chartList = ref([]);
const uploadInitDataList = ref([]);
const uploadDataList = ref([]);

onMounted(() => {
    // nextTick(() => {
    hHeight.value = document.documentElement.clientHeight - 350;
    wWidth.value = document.documentElement.clientWidth - 296;
    // })
    initTable();
});
const initDate = ref([]);
const initTable = () => {
    fillingVisible.value = false;
    uploadVisible.value = false;
    console.log(11111111111);
    initDate.value = [];
    resultList.value = [];
    // 计算选中日期相隔天数
    let startTime = moment(dateStartTime.value);
    let endTime = moment(dateEndTime.value);
    let tableDay = endTime.diff(startTime, "day");
    if (tableDay <= 31) {
        tableItemWidth.value = wWidth.value / (tableDay + 10);
    } else {
        tableItemWidth.value = wWidth.value / 41;
    }
    for (let i = 0; i <= tableDay; i++) {
        initDate.value.push(
            moment(dateStartTime.value).add(i, "day").format("MM-DD")
        );
        resultList.value.push({
            date: moment(dateStartTime.value).add(i, "day").format("MM-DD"),
            do1: "",
            do2: "",
            do3: "",
            do4: "",
            do5: "",
            do6: "",
            do7: "",
            mlss1: "",
            mlss2: "",
            mlss3: "",
            mlss4: "",
            mlss5: "",
            mlss6: "",
            mlss7: "",
            mlvss1: "",
            mlvss2: "",
            mlvss3: "",
            mlvss4: "",
            mlvss5: "",
            mlvss6: "",
            mlvss7: "",
            sv1: "",
            sv2: "",
            sv3: "",
            sv4: "",
            sv5: "",
            sv6: "",
            sv7: "",
            svi1: "",
            svi2: "",
            svi3: "",
            svi4: "",
            svi5: "",
            svi6: "",
            svi7: "",
            containWater1: "",
            containWater2: "",
            containWater3: "",
        });
    }

    getWaterDateList();
};
const getWaterDateList = () => {
    let params = {
        depId: typeUnit.value,
        // "depId": 4,
        startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
        auditStatus: "1",
    };
    dataListHttp.queryCraft(params).then((res) => {
        console.log(res);
        for (let key in res.data.data) {
            if (initDate.value.includes(key)) {
                let idx = initDate.value.findIndex((item) => {
                    return item === key;
                });
                resultList.value[idx] = res.data.data[key];
            }
        }
        uploadDataList.value = JSON.parse(JSON.stringify(resultList.value));
        uploadInitDataList.value = JSON.parse(JSON.stringify(resultList.value));
        chartList.value = uploadInitDataList.value;

        getWaterOtherDateList();
    });
};
const getWaterOtherDateList = () => {
    let params = {
        depId: typeUnit.value,
        // "depId": 4,
        startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
    };
    dataListHttp.queryCraftCalculate(params).then((res) => {
        console.log(res.data.data);
        if (Object.keys(res.data.data).length == 0) {
            res.data.data.avg = {};
            res.data.data.max = {};
            res.data.data.min = {};
            res.data.data.total = {};
        }
        for (let key in res.data.data) {
            if (key == "avg") {
                res.data.data[key].date = "平均值";
            }
            if (key == "max") {
                res.data.data[key].date = "最大值";
            }
            if (key == "min") {
                res.data.data[key].date = "最小值";
            }
            if (key == "total") {
                res.data.data[key].date = "累计值";
            }
            if (
                key == "avg" ||
                key == "max" ||
                key == "min" ||
                key == "total"
            ) {
                resultList.value.push(res.data.data[key]);
            }
        }
        // getWaterOtherOtherDateList()
    });
};
const getWaterOtherOtherDateList = () => {
    let params = {
        // "depId": 4,
        depId: typeUnit.value,
        startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
    };
    dataListHttp.queryAssayRemove(params).then((res) => {
        console.log(res);
        for (let key in res.data.data) {
            res.data.data[key].bodOut = res.data.data[key].bodIn;
            res.data.data[key].codOut = res.data.data[key].codIn;
            res.data.data[key].nhNOut = res.data.data[key].nhNIn;
            res.data.data[key].ssOut = res.data.data[key].ssIn;
            res.data.data[key].tnOut = res.data.data[key].tnIn;
            res.data.data[key].tpOut = res.data.data[key].tpIn;
            if (key == "amountOfYear") {
                res.data.data[key].date = "年去除量";
            }
            if (key == "removalAmount") {
                res.data.data[key].date = "去除量";
            }
            if (key == "removeRate") {
                res.data.data[key].date = "去除率(%)";
            }
            if (
                key == "amountOfYear" ||
                key == "removalAmount" ||
                key == "removeRate"
            ) {
                resultList.value.push(res.data.data[key]);
            }
        }
    });
};
const identifyResultList = ref([
    { title: "日期", label: "rq" },
    { title: "DO(mg/L)", label: "do1" },
    { title: "DO(mg/L)", label: "do2" },
    { title: "DO(mg/L)", label: "do3" },
    { title: "DO(mg/L)", label: "do4" },
    { title: "DO(mg/L)", label: "do5" },
    { title: "DO(mg/L)", label: "do6" },
    { title: "DO(mg/L)", label: "do7" },
    { title: "MLSS(mg/L)", label: "mlss1" },
    { title: "MLSS(mg/L)", label: "mlss2" },
    { title: "MLSS(mg/L)", label: "mlss3" },
    { title: "MLSS(mg/L)", label: "mlss4" },
    { title: "MLSS(mg/L)", label: "mlss5" },
    { title: "MLSS(mg/L)", label: "mlss6" },
    { title: "MLSS(mg/L)", label: "mlss7" },
    { title: "SV30(%)", label: "sv1" },
    { title: "SV30(%)", label: "sv2" },
    { title: "SV30(%)", label: "sv3" },
    { title: "SV30(%)", label: "sv4" },
    { title: "SV30(%)", label: "sv5" },
    { title: "SV30(%)", label: "sv6" },
    { title: "SV30(%)", label: "sv7" },
    { title: "SVI(mL/g)", label: "svi1" },
    { title: "SVI(mL/g)", label: "svi2" },
    { title: "SVI(mL/g)", label: "svi3" },
    { title: "SVI(mL/g)", label: "svi4" },
    { title: "SVI(mL/g)", label: "svi5" },
    { title: "SVI(mL/g)", label: "svi6" },
    { title: "SVI(mL/g)", label: "svi7" },
    { title: "MLVSS(mg/L)", label: "mlvss1" },
    { title: "MLVSS(mg/L)", label: "mlvss2" },
    { title: "MLVSS(mg/L)", label: "mlvss3" },
    { title: "MLVSS(mg/L)", label: "mlvss4" },
    { title: "MLVSS(mg/L)", label: "mlvss5" },
    { title: "MLVSS(mg/L)", label: "mlvss6" },
    { title: "MLVSS(mg/L)", label: "mlvss7" },
    { title: "污泥含水率(%)", label: "containWater1" },
    { title: "污泥含水率(%)", label: "containWater2" },
    { title: "污泥含水率9%)", label: "containWater3" },
]);
const resultList = ref([]);
const headersList = ref([
    {
        prop: "date",
        label: "日期",
    },
    {
        prop: "do1",
        label: "氧化沟东",
    },
    {
        prop: "do2",
        label: "氧化沟西",
    },
    {
        prop: "do3",
        label: "cass",
    },
    {
        prop: "do4",
        label: "A2/O东",
    },
    {
        prop: "do5",
        label: "A2/O西",
    },
    {
        prop: "do6",
        label: "四期南沟",
    },
    {
        prop: "do7",
        label: "四期北沟",
    },
    {
        prop: "mlss1",
        label: "氧化沟东",
    },
    {
        prop: "mlss2",
        label: "氧化沟西",
    },
    {
        prop: "mlss3",
        label: "cass",
    },
    {
        prop: "mlss4",
        label: "A2/O东",
    },
    {
        prop: "mlss5",
        label: "A2/O西",
    },
    {
        prop: "mlss6",
        label: "四期南沟",
    },
    {
        prop: "mlss7",
        label: "四期北沟",
    },
    {
        prop: "sv1",
        label: "氧化沟东",
    },
    {
        prop: "sv2",
        label: "氧化沟西",
    },
    {
        prop: "sv3",
        label: "cass",
    },
    {
        prop: "sv4",
        label: "A2/O东",
    },
    {
        prop: "sv5",
        label: "A2/O西",
    },
    {
        prop: "sv6",
        label: "四期南沟",
    },
    {
        prop: "sv7",
        label: "四期北沟",
    },
    {
        prop: "svi1",
        label: "氧化沟东",
    },
    {
        prop: "svi2",
        label: "氧化沟西",
    },
    {
        prop: "svi3",
        label: "cass",
    },
    {
        prop: "svi4",
        label: "A2/O东",
    },
    {
        prop: "svi5",
        label: "A2/O西",
    },
    {
        prop: "svi6",
        label: "四期南沟",
    },
    {
        prop: "svi7",
        label: "四期北沟",
    },
    {
        prop: "mlvss1",
        label: "氧化沟东",
    },
    {
        prop: "mlvss2",
        label: "氧化沟西",
    },
    {
        prop: "mlvss3",
        label: "cass",
    },
    {
        prop: "mlvss4",
        label: "A2/O东",
    },
    {
        prop: "mlvss5",
        label: "A2/O西",
    },
    {
        prop: "mlvss6",
        label: "四期南沟",
    },
    {
        prop: "mlvss7",
        label: "四期北沟",
    },
    {
        prop: "containWater1",
        label: "北厂区污泥脱水间",
    },
    {
        prop: "containWater2",
        label: "南厂区污泥脱水间",
    },
    {
        prop: "containWater3",
        label: "四期脱水间",
    },
]);
const getUnitTypeName = computed(() => {
    return typeUnit.value == 1
        ? "总公司"
        : typeUnit.value == 2
            ? "星沙厂"
            : typeUnit.value == 3
                ? "城西厂"
                : typeUnit.value == 4
                    ? "城北厂"
                    : typeUnit.value == 4
                        ? "城南厂"
                        : "";
});
const getHeaders = computed(() => {
    return resultList.value.reduce(
        (pre, cur, index) => pre.concat(`value${index}`),
        ["title"]
    );
});
const getValues = computed(() => {
    return headersList.value.map((item) => {
        return resultList.value.reduce(
            (pre, cur, index) =>
                Object.assign(pre, { ["value" + index]: cur[item.prop] }),
            { title: item.label }
        );
    });
});
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    let len = resultList.value.length;
    if (rowIndex === 0) {
        if (columnIndex === 0) {
            return [1, 2];
        } else if (
            columnIndex === len - 1 ||
            columnIndex === len ||
            columnIndex === len + 1
        ) {
            return [1, 1];
        } else if (columnIndex === 1) {
            return [0, 0];
        }
    }
    if (columnIndex === 0) {
        if (rowIndex === 1) {
            return {
                rowspan: 7,
                colspan: 1,
            };
        } else if (rowIndex === 8) {
            return {
                rowspan: 7,
                colspan: 1,
            };
        } else if (rowIndex === 15) {
            return {
                rowspan: 7,
                colspan: 1,
            };
        } else if (rowIndex === 22) {
            return {
                rowspan: 7,
                colspan: 1,
            };
        } else if (rowIndex === 29) {
            return {
                rowspan: 7,
                colspan: 1,
            };
        } else if (rowIndex === 36) {
            return {
                rowspan: 3,
                colspan: 1,
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            };
        }
    }
};
const search = () => {
    initTable();
};

const blurFn = (row, column, item) => {
    console.log(row, column);
    uploadDataList.value[row - 1][identifyResultList.value[column].label] =
        item;
    console.log(uploadDataList.value);
};

const focusFn = (row, column) => {
    window.addEventListener(
        "paste",
        (event) => {
            event = event || window.event;
            const clipdata = event.clipboardData || window.clipboardData;
            const value = clipdata.getData("text/plain");
            console.log(value);

            let clipboardList = value.split("\r\n");
            clipboardList.forEach((item, ind) => {
                let itemList = item.split("\t");
                clipboardList[ind] = itemList;
            });
            setTimeout(() => {
                console.log("1111", clipboardList);
                clipboardList.forEach((item, ind) => {
                    item.forEach((n, m) => {
                        console.log(
                            row - 1 + m < uploadDataList.value.length,
                            uploadDataList.value.length
                        );
                        if (row - 1 + m < uploadDataList.value.length) {
                            resultList.value[row - 1 + m][
                                identifyResultList.value[column + ind].label
                            ] = n;
                        }
                    });
                });
            });
        },
        { once: true }
    );
};
const isNoEdit = () => {
    return false;
};

watch(
    uploadInitDataList,
    (newVal, oldVal) => {
        console.log("11111", newVal);
    },
    { deep: true }
);
watch(
    uploadDataList,
    (newVal, oldVal) => {
        console.log("222", newVal);
    },
    { deep: true }
);
const submitEdit = () => {
    setTimeout(() => {
        let compare1 = {
            obj: uploadInitDataList.value,
        };
        let compare2 = {
            obj: uploadDataList.value,
        };
        console.log(uploadInitDataList.value, uploadDataList.value);
        if (JSON.stringify(compare1) == JSON.stringify(compare2)) {
            ElMessage({
                message: "没有检测到数据修改",
                type: "warning",
            });
        } else {
            ElMessageBox.alert(`确认提交当前修改的数据吗？`, "提交修改", {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: "确认",
                callback: (action) => {
                    let params = {
                        dailyPOList: uploadDataList.value,
                        username: username.value,
                    };
                    dataListHttp.entryDailyData(params).then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            ElMessage({
                                message: "提交成功",
                                type: "success",
                            });
                            initTable();
                        } else {
                            ElMessage({
                                message: "提交失败,请重新提交",
                                type: "error",
                            });
                        }
                    });
                },
            });
        }
    }, 100);
};
const resetEdit = () => {
    initTable();
};
const exportDataList = () => {
    let params = {
        // "depId": 4,
        depId: typeUnit.value,
        startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
    };
    dataListHttp.exportCraft(params).then((response) => {
        console.log(response);
        const content = response.data;
        const blob = new Blob([content], { type: "application/ms-excel" });
        let fileName = `工艺数据(星沙).xls`;
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};
const uploadFile = () => {
    uploadVisible.value = true;
    dialogTitle.value = "上传文件";
    uploadType.value = "1";
};
const filling = () => {
    fillingVisible.value = true;
    dialogTitle.value = "手工填报";
};
</script>

<style scoped lang="less">
.waterYield {
    background: #fff;
    height: 100%;
}

.filter {
    display: flex;
    align-items: center;
}

.uploadBtn {
    text-align: left;
    margin-bottom: 40rem;
    margin-right: 20rem;
}

.chart {
    margin-top: 60px;
    position: relative;

    .settingSta {
        position: absolute;
        right: 0;
    }
}

.unit {
    text-align: right;
    font-size: 14px;
    line-height: 2;
    padding-right: 40px;
    margin-top: -20px;
}
</style>
